iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

Kotlin Everyday:新手寫程式踩的坑系列 第 8

Day 8 ─用Kotlin RecycleView做一個ImageList (上)

  • 分享至 

  • xImage
  •  


做一個圖片清單,往下滑動頁面會有一組一組圖片和勵志小語出現,這裡應用到RecycleView的功能,是一個很實用且強大的元件。

怎麼做ImageList
定義資料型態 -> 資料畫面設計 -> 在Adapter將畫面和資料綁定 -> 在RecycleView展示

  1. 首先建立你的資料庫,把圖片和勵志小語配成一組資料,也就是說每一筆資料都包含一張圖跟一個字串,RecycleView顯示方式是資料一筆筆填進去,所以要給資料的素材。
    (左圖是xml拉RecycleView的元件,可以看到資料排列的方式,右圖是實際上一組資料的長相)

  2. 按左上Filte/New/Kotlin File建立一個名為List的kt檔,我們要用它來放資料

  3. 導入圖片:從網路上抓取一些圖片,從桌面複製後到res/drawable按右鍵貼上(Paste),可以看到他們出現在drawable夾裡囉

P.S 本地練習沒有差,但我不確定推到github上會不會還保有圖片檔,最保險的方法是生成xml檔

  1. 到List.kt裡面定義資料的型態(data class),並且宣告一個list寫入一筆筆資料,點這裡了解使用data class的好處,這樣就做完資料庫囉,等等要引用
data class item (val image : Int, val text : String)
                                  //宣布item資料型態是一個image和一個text
val itemList = mutableListOf(     //宣告一個mutableList裡面放好itema們
                                  //引入圖片位置(R.drawable.圖片名稱)
    item(R.drawable.pexels_photo_2187304, "True mastery of any skill..."),
    item(R.drawable.pexels_photo_2253275, "Sweat is the lubricant of ..."),
    item(R.drawable.pexels_photo_1663421,"Bravery never goes out of fashion."),
    item(R.drawable.pexels_photo_2896179, "Giving is a reward in itself."),
    item(R.drawable.pexels_photo_2664417, "All things in their being are..."),
    item(R.drawable.pexels_photo_2607544, "Nothing is impossible!"),
    item(R.drawable.pexels_photo_2613329, "Do what you say,say what you do"),
    item(R.drawable.pexels_photo_2898222, "Procrastination is the..."))
    
  1. 有了資料素材,但是資料要怎麼呈現?我們要做一個畫面來告訴RecycleView等下怎麼顯示,就像是個範例,定好Image在螢幕上的長寬或Text字體大小等等,因為每一筆資料都是一張圖片和一個字串。

  2. 開一個xml檔案,設定好Image和Text在螢幕上顯示的大小,這就是等下adapter會調用的範例畫面

  3. 現在我們資料也有了,畫面樣式也有了,要怎麼把他們組合再一起呢?這時候就需要透過一個Adapter來處理。
    Adapter這個東西,前幾次試做RecycleView時,我覺得對初學者來說很抽象,難以理解為什麼需要這個東西,試著想像Adapter是一個暫時的表演場所,在這個場所裡:

  • 我會先排好演出的順序位置(也就是綁定Image和Text等元件)
  • 確定形式後,就是把表演者一個一個叫進來,站在我剛剛安排好的位置(Image和Text樣式都確定了,將資料和畫面Bind連結起來)
  • 這時候可以演出了(將Adapter指給RecycleView來展示)

簡單來說,因為 RecycleView 是一種View ,不能添加子項目,因此在呈現時需要某種工具將資料安排好呈現在 RecycleView 上面。聽起來還是很模糊的話,實作一遍就知道了!這裡比較複雜,可以參考iOS 工程師的 Android 筆記一步一步跟著做。

實作Adapter

  1. 在File/New/Kotlin File建立一個名為「MyAdapter」的檔案,kind要選class類,讓它繼承RecyclerView.Adapter
class MyAdapter : RecyclerView.Adapter<>()
  1. 會發現上面Adapter顯示紅底,系統提示需要放ViewHolder,所以在下面建立inner class 宣告一個ViewHolder,讓它繼承RecycleView.ViewHolder,參數是View型態
class MyAdapter : RecyclerView.Adapter<>(){

inner class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView){}
}
  1. 定義好ViewHolder後,添加到Adapter裡面,是指給MyAdapter的ViewHolder,但這時候最前面的MyAdapter仍顯示紅底
class MyAdapter : RecyclerView.Adapter<MyAdapter.ViewHolder>(){

inner class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView){}
}

鼠標移到紅底,有個紅色燈泡按下去會顯示「Implement members」提示有待執行的方法

  1. 按下去後三項全選起來OK,需要執行的東西會跑出去,在 class 和 inner class 之間會有三個待執行的方法,分別是:
  • onCreateViewHolder(ViewGroup, int)
    創造一個新的 RecyclerView.ViewHolder,並初始化 RecyclerView 畫面佈局
  • getItemCount()
    取得Adpater持有的資料總數
  • onBindViewHolder(ViewHolder, int)
    更新 RecyclerView.ViewHolder 內容
class MyAdapter : RecyclerView.Adapter<MyAdapter.ViewHolder>(){
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    }           
    override fun getItemCount(): Int {
    }
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    }

    inner class ViewHolder(itemView : View) : RecyclerView.ViewHolder(itemView)

現在有了資料、有畫面佈局, Adapter 架構也弄出來了,就要開始把他們連結一起、最後讓 RecycleView 呈現,要怎麼做呢?下集待續~


上一篇
Day 7 ─用Kotlin做點餐介面 (4) RadioButton.OnCheckedChangeListener
下一篇
Day 9 ─用Kotlin RecycleView做一個ImageList (下)
系列文
Kotlin Everyday:新手寫程式踩的坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言